<template>
  <div class="hotel-amenities">
    <div class="section-header">
      <trophy-outlined class="section-icon" />
      <h2>酒店设施</h2>
    </div>
    
    <div class="amenities-container" v-if="hotelAmenities && hotelAmenities.categories">
      <div v-for="category in hotelAmenities.categories" :key="category.id" class="amenity-category">
        <div class="category-header">
          <component :is="getIconComponent(category.iconName)" class="category-icon" />
          <h3>{{ category.name }}</h3>
        </div>
        <div class="amenity-grid">
          <div v-for="amenity in category.items" 
               :key="amenity.id" 
               class="amenity-item"
               :class="{ 'unavailable': !amenity.available }">
            <div class="amenity-icon-wrapper">
              <component :is="getIconComponent(amenity.iconName)" />
            </div>
            <div class="amenity-content">
              <span class="amenity-name">{{ amenity.name }}</span>
              <div class="amenity-tags">
                <a-tag v-if="amenity.price" color="blue">{{ amenity.price }}</a-tag>
                <a-tag v-if="!amenity.available" color="red">不可用</a-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 当没有设施数据时显示提示信息 -->
    <div class="no-data-container" v-else>
      <a-empty description="暂无酒店设施信息">
        <template #description>
          <span>该酒店暂未提供设施信息，请联系酒店了解详情</span>
        </template>
      </a-empty>
    </div>

    <div class="amenity-notice">
      <a-alert 
        type="info"
        show-icon
        :message="'设施开放时间提示'"
        :description="'部分设施可能因维护或其他原因暂时关闭。具体开放时间请咨询前台。'"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useHotelDetailStore } from '@/stores/hotelDetailStrore'
import { storeToRefs } from 'pinia'
import { 
  CoffeeOutlined,
  WifiOutlined,
  CarOutlined,
  ExperimentOutlined,
  CustomerServiceOutlined,
  SafetyCertificateOutlined,
  GlobalOutlined,
  GiftOutlined,
  HeartOutlined,
  ThunderboltOutlined,
  ShoppingOutlined,
  TeamOutlined,
  TrophyOutlined,
  BulbOutlined,
  RestOutlined,
  SkinOutlined
} from '@ant-design/icons-vue'

// 使用store
const hotelDetailStore = useHotelDetailStore()
const { hotelDetail } = storeToRefs(hotelDetailStore)

// 获取酒店设施数据
const hotelAmenities = computed(() => hotelDetail.value.amenities)

// 图标映射函数
const getIconComponent = (iconName: string) => {
  const iconMap: Record<string, any> = {
    'wifi': WifiOutlined,
    'car': CarOutlined,
    'coffee': CoffeeOutlined,
    'experiment': ExperimentOutlined,
    'customer-service': CustomerServiceOutlined,
    'safety': SafetyCertificateOutlined,
    'global': GlobalOutlined,
    'gift': GiftOutlined,
    'heart': HeartOutlined,
    'thunderbolt': ThunderboltOutlined,
    'shopping': ShoppingOutlined,
    'team': TeamOutlined,
    'trophy': TrophyOutlined,
    'bulb': BulbOutlined,
    'rest': RestOutlined,
    'skin': SkinOutlined
  }
  
  return iconMap[iconName] || BulbOutlined
}

// 移除了默认的模拟数据
</script>

<style scoped>
.hotel-amenities {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.no-data-container {
  padding: 48px 0;
  text-align: center;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.section-icon {
  font-size: 24px;
  color: #1890ff;
}

h2 {
  font-size: 20px;
  margin: 0;
  color: #262626;
  font-weight: 600;
}

.amenities-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.amenity-category {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
}

.amenity-category:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.category-icon {
  font-size: 20px;
  color: #1890ff;
}

h3 {
  margin: 0;
  font-size: 18px;
  color: #262626;
  font-weight: 500;
}

.amenity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.amenity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f5f5f5;
  border-radius: 8px;
  color: #595959;
  transition: all 0.3s ease;
}

.amenity-item:hover {
  background: #e6f7ff;
}

.amenity-item.unavailable {
  opacity: 0.6;
  background: #f5f5f5;
}

.amenity-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.amenity-icon-wrapper .anticon {
  font-size: 18px;
  color: #1890ff;
}

.amenity-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.amenity-name {
  font-weight: 500;
}

.amenity-tags {
  display: flex;
  gap: 8px;
}

.amenity-notice {
  margin-top: 32px;
}

:deep(.ant-tag) {
  margin: 0;
}

@media (max-width: 768px) {
  .amenities-container {
    grid-template-columns: 1fr;
  }
  
  .amenity-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}
</style> 